<template>
<div>
    <Modal v-model="select" title="实有人口" width="900" @on-ok="ok">
        <template slot="footer">
            <Button type="text" @click="modal1 = true">新增</Button>
            <Button type="text" @click="select = false">取消</Button>
            <Button type="primary" @click="ok">确定</Button>
        </template>
        <List :fit="false" :border="true" :columns="columns" :filters="filters" :loadData="$api.people.getList" @on-row-dblclick="detail" @on-selection-change="selectRow" ref="list"></List>
    </Modal>
    <Modal v-model="modal1" title="新增" @on-ok="ok">
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
    </Modal>
</div>
</template>

<script>
export default {
    data() {
        return {
            select: true,
            modal1: false,
            filters: [{
                col: 12,
                label: "姓名",
                key: "name",
                models: {
                    name: {
                        type: String
                    }
                },
                type: "Input"
            }, {
                col: 12,
                label: "身份证",
                key: "cardno",
                models: {
                    cardno: {
                        type: String
                    }
                },
                type: "Input"
            }],
            columns: [{
                type: 'index',
                width: 60,
                align: 'center',
                fixed: 'left'
            }, {
                type: 'selection',
                width: 60,
                align: 'center',
                fixed: 'left'
            }, {
                title: '姓名',
                width: 150,
                key: 'name',
                render: (h, params) => {
                    return [h('Avatar', {
                        props: {
                            src: params.row.photo,
                            icon: "ios-person",
                            size: "small"
                        },
                        style: {
                            marginRight: '5px'
                        }
                    }), params.row.name];
                }
            }, {
                title: '年龄',
                key: 'age',
                width: 70,
                align: 'center',
                render: (h, params) => {
                    let birthday = this.$moment(params.row.birthday).format('YYYY-MM-DD')
                    let age = this.getAge(birthday)
                    return h('span', age);
                }
            }, {
                title: '出生日期',
                key: 'birthday',
                align: 'center',
                width: 100,
                render: (h, params) => {
                    let birthday = this.$moment(params.row.birthday).format('YYYY-MM-DD')
                    return h('span', birthday);
                }
            }, {
                title: '性别',
                key: 'gender',
                align: 'center',
                width: 70
            }, {
                title: '身份证',
                key: 'cardno',
                align: 'center',
                width: 150
            }, {
                title: '手机号',
                align: 'center',
                key: "tel"
            }],
        }
    },
    methods: {
        ok() {

        },
        cancel() {

        },
        add() {

        },
        detail(row, index) {
            this.$router.push({
                path: "/people/Details",
                query: {
                    id: row.id
                }
            });
        },
        selectRow(selection) {
            this.ids = selection.map(item => {
                return item.id
            })
        },
        getAge(value) {
            let returnAge
            let strBirthdayArr = new Date(value).toLocaleDateString().split("/")
            let birthYear = strBirthdayArr[0]
            let birthMonth = strBirthdayArr[1]
            let birthDay = strBirthdayArr[2]

            let d = new Date()
            let nowYear = d.getFullYear()
            let nowMonth = d.getMonth() + 1
            let nowDay = d.getDate()

            if (nowYear == birthYear) {
                returnAge = 0; //同年 则为0岁
            } else {
                let ageDiff = nowYear - birthYear; //年之差
                if (ageDiff > 0) {
                    if (nowMonth == birthMonth) {
                        let dayDiff = nowDay - birthDay; //日之差
                        if (dayDiff < 0) {
                            returnAge = ageDiff - 1;
                        } else {
                            returnAge = ageDiff;
                        }
                    } else {
                        let monthDiff = nowMonth - birthMonth; //月之差
                        if (monthDiff < 0) {
                            returnAge = ageDiff - 1;
                        } else {
                            returnAge = ageDiff;
                        }
                    }
                } else {
                    returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
                }
            }

            return returnAge; //返回周岁年龄
        }
    },
}
</script>

<style lang="less" scoped>
/deep/ .peopleAttr {
    width: 2em;
    height: 2em;
    vertical-align: -0.45em;
    fill: currentColor;
    overflow: hidden;
}
</style>
